<template>
  <div calss="Fans">
    <!-- 头部 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 首页 -->
        <myel-header text1="首页" text2="粉丝管理"></myel-header>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
          <el-tab-pane label="粉丝列表" name="first">
            <el-row :gutter="24">
              <el-col :xs="12" :sm="6" :lg="3" v-for="(item,i) in results" :key="i">
                <div class="grid-content">
                  <div>
                    <div class="yuan">
                      <el-image :src="item.photo" :fit="fit" class="img-border"></el-image>
                    </div>
                    <p>{{item.name}}</p>
                    <el-button type="primary" plain>关注</el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 分页 -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="per_page"
              :total="total_count"
              :current-page="page"
              @current-change="onchangepage"
            ></el-pagination>
          </el-tab-pane>
          <!-- 粉丝画像 -->
          <el-tab-pane label="粉丝画像" name="img">
            <div class="zhubing" ref="zhuzhuang"></div>
            <div ref="bingzhuang" class="zhubing"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
// 第一步 安装包
// 第二步 引入
import * as echarts from 'echarts'
// 接口
import { getfans, follfans } from '../../api/articles.js'
// 头部
import MyelHeader from '../../components/MyelHeader.vue'
export default {
  name: 'Fans',
  data () {
    return {
      activeName: 'first',
      // 当前页数
      page: 1,
      // 每页数量
      per_page: 24,
      // 总数
      total_count: 0,
      // 每页数据
      results: [],
      // 清晰图片
      fit: 'cover'
    }
  },
  created () {
    this.isgetfans()
  },
  mounted () {
    this.onfollfans()
  },
  methods: {
    // 调用接口
    async isgetfans () {
      const { data } = await getfans({ page: this.page, per_page: this.per_page })
      if (data.message === 'OK') {
        this.results = data.data.results
        this.total_count = data.data.total_count
      } else {
        this.$message('网络延迟，请刷新页面！')
      }
    },
    // 当前页改变则
    onchangepage (res) {
      this.page = Number(res)
      this.isgetfans()
    },
    // 获取图表数据接口
    async onfollfans () {
      try {
        const { data: { data } } = await follfans()
        // 绘制echarts
        this.draw(data)
        this.bing(data)
        console.log(data)
      } catch (error) {
        console.log('假数据走起')
        const data = {
          gender: {
            male: 68,
            female: 94
          },
          age: {
            le18: 72,
            le23: 88,
            le30: 74,
            le40: 50,
            le50: 68,
            gt50: 88
          },
          device: {
            ios: 45,
            android: 99
          }
        }
        // 绘制echarts
        this.draw(data)
        this.bing(data)
      }
    },
    // 这个方法是一个触发条件，可以换，tab是当前项目的一个表格，如果当前表格的name是img那么就触发
    tabClick (tab) {
      if (tab.name === 'img') {
        this.bing()
      }
    },
    // 创建一个方法将三四五步包裹
    draw (data) {
      // 声明数据
      const ages = data.age
      const ageX = []
      const ageY = []
      Object.keys(ages).forEach((x) => {
        ageX.push(x.replace('le', '小于').replace('gt', '大于'))
        ageY.push(ages[x])
      })
      // 第三步 创建实例，在methods里面，zhuzhuang是需要放入的dom元素，可以用ref绑定
      const es = echarts.init(this.$refs.zhuzhuang)
      // 第四步 option
      const option = {
        color: ['red'],
        title: {
          text: '年龄分布',
          left: 'center',
          textStyle: {
            color: '#222'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ageX
        },
        yAxis: {
        },
        series: [{
          data: ageY,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      // 第五步 使用
      es.setOption(option)
    },
    // 饼图
    bing (data) {
      const bings = echarts.init(this.$refs.bingzhuang)
      const option = {
        title: {
          text: '性别分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: 'xxxxxxx',
            type: 'pie',
            center: ['50%', '60%'],
            color: ['#222', 'red'],
            data: [
              { value: data.gender.male, name: '男' },
              { value: data.gender.female, name: '女' }
            ]
          }
        ]
      }
      bings.setOption(option)
    }
  },
  components: {
    MyelHeader
  }
}
</script>

<style lang="less" scoped>
.el-col {
  border-radius: 4px;
  margin: 15px 0 20px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  width: 130px;
  padding: 15px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.yuan {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  .img-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.zhubing {
  width: 700px;
  height: 400px;
  display: inline-block;
}
</style>
